<!--
 * @Author: 赖钊亮
 * @Description: 账号设置
 * @Date: 2020-07-01 13:09:16
 * @LastEditTime: 2020-07-07 09:47:21
 * @LastEditors: Please set LastEditors
 * @FilePath: \mobile_item_121e:\新建文件夹\jkshopping\src\pages\my\components\system.vue
--> 
<template>
  <div>
    <!--设置顶部 -->
    <van-nav-bar title="账号" left-text="返回" left-arrow @click-left="goBack" />
    <div class="content">
      <div class="content-img">
        <!-- 头像上传 -->
        <van-uploader :after-read="afterRead">
          <van-image :src="this.vip.avatar" />
        </van-uploader>
      </div>
      <!-- 昵称 -->
      <div class="name">
        <van-cell title="昵称" is-link :value="this.vip.username" @click="name" />
      </div>
      <!-- 性别 -->
      <div class="sex">
        <van-cell is-link title="性别" @click="show = true" :value="this.sex" />
        <van-action-sheet
          @select="Sex"
          v-model="show"
          :actions="actions"
          cancel-text="取消"
          description="性别选择"
          close-on-click-action
        />
      </div>
      <!-- 重置密码 -->
      <div class="pwd">
        <van-cell title="重置密码" is-link />
      </div>
      <!-- 关于商城 -->
      <div class="about">
        <van-cell title="关于商城" is-link @click="about" />
      </div>
      <!-- 退出登录 -->
      <div class="out">
        <van-button type="default" @click="out">退出登录</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations } = createNamespacedHelpers("userModule");
import * as api from "@/api/apiList/user/user.js";
import * as api1 from "@/api/apiList/system/system.js";
export default {
  data() {
    return {
      show: false, // 性别弹窗
      sex: "", // 性别
      vip: "", //用户信息
      datas: "", //关于商城
      // 性别
      actions: [
        {
          name: "男"
        },
        {
          name: "女"
        }
      ]
    };
  },

  computed: {
    // token
    ...mapState(["token"])
  },
  methods: {
    // 退出删除token
    ...mapMutations(["REMOVE_TOKEN"]),

    //返回上一页
    goBack() {
      this.$router.push("/my");
    },
    // 判断性别
    async Sex(action) {
      this.sex = action.name;
      if (this.sex === "男") {
        await this.API_userEditInfo(1);
      } else {
        await this.API_userEditInfo(2);
      }
    },
    // 获取性别接口
    async API_userEditInfo(sex) {
      let data = {
        gender: sex
      };
      return await api.userEditInfo(this.qs.stringify(data));
    },
    //获取用户名字
    async API_user_info() {
      return await api.user_info();
    },
    // 跳转到重置界面
    reset() {
      this.$router.push("/reset");
    },
    // 跳转到修改昵称界面
    name() {
      this.$router.push("/name");
    },
    // 性别弹窗
    onSelect(item) {
      this.show = false;
      Toast(item.name);
    },
    // 退出登录
    out() {
      this.$dialog
        .confirm({
          message: "是否退出登录"
        })
        .then(() => {
          //退出账号
          this.REMOVE_TOKEN();
          this.$toast.success("退出成功");
          this.$router.push("/my");
        })
        .catch(() => {
          // on cancel
        });
    },
    // 关于商城
    async API_system() {
      return await api1.system();
    },
    async API_upload(avatar) {
      let data = {
        avatar
      };
      return await api.upload(this.qs.stringify(data));
    },
    // 关于商城弹窗
    about() {
      this.$dialog
        .alert({
          message: this.datas.notice
        })
        .then(() => {
          // on close
        });
    },
    // 上传头像方法
    async afterRead(file) {
      console.log(file)
      let res = await this.API_upload(file.file.name);
      console.log(res);
    }
  },
  async created() {
    // 用户名字
    let res = await api.user_info();
    if (res.data.code === 200) {
      this.vip = res.data.data.user;
      // 性别判断
      if (this.vip.gender === 1) {
        this.sex = "男";
      } else {
        this.sex = "女";
      }
    }

    // 关于商城
    let res1 = await api1.system();
    this.datas = res1.data.data;
  }
};
</script>

<style lang="scss" scoped>
.content {
  display: block;
  margin: 0 auto;
  .content-img {
    /deep/ .van-image {
      img {
        border-radius: 50%;
        width: 20%;
        margin: 10px auto;
      }
    }
    .van-cell {
      margin: 20px auto;
      height: 70px;
    }
    .van-cell__title {
      text-align: left;
      line-height: 50px;
    }
    .van-cell__value,
    .van-cell__right-icon {
      line-height: 50px;
    }
  }
  .out {
    margin: 10px auto;
    .van-button {
      width: 100%;
    }
  }
}
</style>